<template>
	<el-main>
		<el-empty :image-size="200" description="暂无报表" v-if="list.length==0"></el-empty>
		<el-row :gutter="15">
			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.reportId">
				<el-card shadow="hover" :header="item.flowName" class="item-background">
					<div class="report" @click="getReportQuery(item)">
						<h2>{{ item.title }}</h2>
						<p style="text-align: right">{{ item.createUserName }}</p>
						<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;" :title="item.remark">{{ item.remark }}</p>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
export default {
	name: 'My Bpm Report',
	components: {},
	provide() {
		return {
			list: this.list
		}
	},
	data() {
		return {
			list: []
		}
	},
	mounted() {
		this.getBpmReportListByRole();
	},
	methods: {
		async getBpmReportListByRole() {
			var res = await this.$API.bpm.bpmReport.getBpmReportListByRole.get({model:'0'});
			if(res.code==200)
			{
				if(res.data){
					this.list = res.data;
				}
			}
		},
		getReportQuery(item) {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/bpm/report/query',
					query:{
						reportId:item.reportId
					}
				})
			})
		},
	}
}
</script>

<style scoped>
.item-background {
	background: linear-gradient(to right, #729492, #4776E6);
	color: #fff;
	cursor: pointer;
}

.report h2 {
	font-size: 30px;
}

.report p {
	font-size: 14px;
	margin-top: 13px;
	opacity: 0.7;
}
</style>
